<template>
  <div class="access-log">
    <div class="app-container">
      <div class="filter-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="操作人">
            <el-input v-model="formInline.user_name" placeholder="操作人"></el-input>
          </el-form-item>
          <el-form-item label="接口名称">
            <el-input v-model="formInline.api_name" placeholder="接口名称"></el-input>
          </el-form-item>
          <el-form-item label="IP">
            <el-input v-model="formInline.ip" placeholder="IP地址"></el-input>
          </el-form-item>
          <el-form-item label="操作日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择开始日期" v-model="formInline.start_date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" type="flex" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-date-picker placeholder="选择结束日期" v-model="formInline.end_date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>

        </el-form>
      </div>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        style="width: 100%">
        <el-table-column
          prop="created_at"
          label="日期"
         >
        </el-table-column>
        <el-table-column
          prop="user_name"
          label="操作人"
         >
        </el-table-column>
        <el-table-column
          prop="api_name"
          label="接口名">
        </el-table-column>
        <el-table-column
          prop="method"
          label="请求方式">
        </el-table-column>
        <el-table-column
          prop="ip"
          label="IP地址">
        </el-table-column>

        <el-table-column
                          label="操作">>
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" @click="showDetail(row)">
              详情
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="formInline.page_num" :limit.sync="formInline.page_size" @pagination="getList" />
      <el-drawer
        title="访问日志详情"
        :visible.sync="drawer"
        :direction="direction"
        >
        <div style="border-left:1px solid red;margin-left: 15px">
          <el-form label-position="left" label-width="80px" :model="tempData" class="access_log_detail">
            <el-form-item label="日志ID">
              <el-input v-model="tempData.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="用户ID">
              <el-input v-model="tempData.user_id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="操作人账号">
              <el-input v-model="tempData.user_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="请求方式">
              <el-input v-model="tempData.method" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="请求地址">
              <el-input v-model="tempData.api" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="接口描述">
              <el-input v-model="tempData.api_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="请求参数">
              <el-input  type="textarea" v-model="tempData.request_body" :disabled="true" style="width: 80%;height: 40%"></el-input>
            </el-form-item>
            <el-form-item label="请求响应">
              <el-input  type="textarea" v-model="tempData.response_body" :disabled="true" style="width: 80%;height: 50%"></el-input>
            </el-form-item>
            <el-form-item label="IP地址">
              <el-input   v-model="tempData.request_ip" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="请求时间">
              <el-input   v-model="tempData.updated_at" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
        </div>

      </el-drawer>
    </div>
  </div>
</template>

<script src="./_access-log.js" lang="js"></script>
<style src="./_access-log.scss" lang="scss" scoped></style>
